<template>
  <view viewport>
    <view class="wrap">
      <view class="card">
        <view class="column_container">
          <view class="row_container">
            <image class="title_icon" src="../../static/images/icon_work_time.png"></image>
            <view class="common_title_bold">周期</view>
            <view class="date">{{dataDetail.beginDate +' ~ '+dataDetail.endDate}} </view>
          </view>
        </view>
        <view class="line"></view>
        <view class="column_container">
          <view class="row_container">
            <view class="line_vertical"></view>
            <view class="common_title">本周工作总结</view>
          </view>
          <view class="text_container">
            <textarea class="text_area" v-model="dataDetail.workSummary" placeholder="请输入"></textarea>
          </view>
        </view>
        <view class="column_container">
          <view class="row_container">
            <view class="line_vertical"></view>
            <view class="common_title">下周工作计划</view>
          </view>
          <view class="text_container">
            <textarea class="text_area" v-model="dataDetail.weekWorkPlan" placeholder="请输入"></textarea>
          </view>
        </view>
        <view class="column_container">
          <view class="row_container">
            <view class="line_vertical"></view>
            <view class="common_title">需要协调与帮助</view>
          </view>
          <view class="text_container">
            <textarea class="text_area" v-model="dataDetail.coordinateHelp" placeholder="请输入"></textarea>
          </view>
        </view>
        <view class="column_container">
          <view class="row_container">
            <view class="line_vertical"></view>
            <view class="common_title">附件</view>
            <view class="row_container_end" @click="addFile">
              <view class="add_text_plus"> +</view>
              <view class="add_text"> 添加</view>
            </view>
          </view>
          <!--动态表单-->
          <view class="file_container">
            <view class="row_container_between" v-for="(item,index) in fileList" :key="index">
              <image class="file" src="../../static/images/icon_file_img.png" @click="previewFile(item.url)"></image>
              <image class="add" src="../../static/images/icon_delete_line.png" @click="removeFile(index)"></image>
            </view>
          </view>
        </view>
      </view>

    </view>
    <view class="bottom-contianer">
      <button class="button" @click="submit">提交</button>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import type { fileItem } from '@/types/files'
  import { saveClPlan } from '@/services/plan'
  import { onLoad } from '@dcloudio/uni-app'
  import { useMemberStore } from '@/stores'
  import { getFileType, uploadFilePromise } from '@/utils/upload'
  import Func from '@/utils/func'

  //数据源
  type dataDetail = {
    planId : string
    weekWorkPlan : string
    workSummary : string
    coordinateHelp : string
    dataState : string
    attachIds : string
    beginDate ?: string
    endDate : string

  }
  const query = defineProps<{
    data : string
  }>()

  //页面数据
  const dataDetail = ref<dataDetail>({
    planId: '',
    weekWorkPlan: '',
    workSummary: '',
    coordinateHelp: '',
    dataState: '',
    attachIds: '',
    beginDate: '',
    endDate: ''
  })//页面数据
  const userInfo = useMemberStore().getUserInfo()


  //附件列表
  const fileList = ref<fileItem[]>([])

  async function addFile() {

    uni.chooseImage({
      count: 1,
      secret: false,
      position: 'back',
      sourceType: ['camera', 'album'],
      success: async (res : any) => {
        console.log('选择的文件列表:', res.tempFiles[0].path);
        // res.tempFiles 结构： [{ path: '临时路径', name: '文件名', size: 文件大小, type: '文件类型' }]
        const result : any = await uploadFilePromise(res.tempFiles[0].path)
        console.log(result)
        fileList.value.push({
          url: result.url,
          fileId: result.fileId
        })
      },
      fail: (err) => {
        console.error('选择文件失败:', err);
      }
    });
  }


  onLoad(() => {
    dataDetail.value = JSON.parse(query.data)
    console.log(dataDetail.value)
    //解析附件数据
    if (dataDetail.value.attachIds) {

      if (dataDetail.value.attachIds.includes(',')) {//多个
        const fileUrlList = dataDetail.value.attachIds.split(',')
        fileUrlList.forEach((item : any, index : number) => {
          fileList.value.push({
            url: item,
            fileId: ''
          })
        })
      } else {
        fileList.value.push({
          url: dataDetail.value.attachIds,
          fileId: ''
        })
      }

    }

  })
  //删除
  const removeFile = (index : number) => {
    fileList.value.splice(index, 1)
  }

  //选择地址
  const getLocation = () => {
    console.log('selectCity')
    uni.chooseLocation({
      success: function (res) {
        console.log('selectCity', res)
        location.value = res.address

      },
    })
  }
  //提交
  const submit = () => {

    if (Func.isEmpty(dataDetail.value.weekWorkPlan)) {
      uni.showToast({
        title: '请输入下周工作计划',
        icon: 'none'
      })
      return
    }
    if (Func.isEmpty(dataDetail.value.workSummary)) {
      uni.showToast({
        title: '请输入本周工作总结',
        icon: 'none'
      })
      return
    }
    //图片列表转化为id字符串
    dataDetail.value.attachIds = fileList.value.map(item => (item.url)).join(',')
    saveClPlan({
      userCode: userInfo?.userCode,
      ...dataDetail.value
    }).then(res => {
      console.log(res)
      if (res.success) {
        uni.showToast({
          title: '提交成功',
          icon: 'none'
        })
        uni.navigateBack()
      }
    })


  }
  //预览
  const previewFile = (item : any) => {
    console.log(item)
    const type = getFileType(item)
    console.log(type)
    uni.navigateTo({
      url: `/pagesMember/mediaPreview/mediaPreview?data=${JSON.stringify({
        fileCtype: type,
        fileUrl: item,
        fileCode: ''
      })}`
    })
  }
</script>

<style lang="scss">
  page {
    background-color: #F9FAFB;
  }

  .viewport {
    display: flex;
  }

  .wrap {
    padding-bottom: 140rpx;
  }

  .card {
    margin: 40rpx 20rpx;
    background: #FFFFFF;
    display: flex;
    padding: 24rpx;
    flex-direction: column;
    // box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(209, 227, 230, 0.58);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .column_container {
    margin-top: 24rpx;
    margin-bottom: 24rpx;
    margin-left: 5rpx;
    display: flex;
    flex-direction: column;
  }

  .file_container {
    margin-top: 32rpx;
  }


  .row_container {
    margin-left: 5rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .row_container_end {
    margin-right: 5rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
  }

  .row_container_between {
    margin-right: 5rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
  }

  .input {
    flex-grow: 1;
    color: #888E98;
    font-size: 30rpx;
  }

  .line_vertical {
    width: 8rpx;
    height: 30rpx;
    margin-right: 10rpx;
    background: linear-gradient(180deg, #61D7ED 0%, #54B9CC 100%);
    border-radius: 4rpx 4rpx 4rpx 4rpx;
  }

  .row_container_title {
    font-size: 28rpx;
    color: #1C253A
  }

  .row_container_content {
    font-size: 28rpx;
    margin-left: 15rpx;
    color: #394259
  }

  .title_icon {
    width: 60rpx;
    height: 60rpx;
    // transform: translateX(400px);
    // filter: drop-shadow(#54B9CC -400px 0);
  }

  .add {
    width: 55rpx;
    height: 55rpx;
    // transform: translateX(400px);
    // filter: drop-shadow(#54B9CC -400px 0);
  }

  .file {
    width: 100rpx;
    height: 100rpx;
  }

  .add_text {
    margin-left: 10rpx;
    height: 44rpx;
    font-size: 30rpx;
    color: #54B9CC;
    line-height: 44rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .add_text_plus {
    margin-left: 15rpx;
    height: 44rpx;
    font-size: 44rpx;
    color: #54B9CC;
    line-height: 44rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .line {
    background-color: #F2F3F5;
    height: 1rpx;
  }

  .row_container_content_red {
    font-size: 28rpx;
    margin-left: 15rpx;
    color: #E02020
  }

  .title_left {
    height: 48rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #1C253A;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .common_title {
    height: 48rpx;
    line-height: 48rpx;
    font-size: 32rpx;
    color: black;
  }

  .common_title_bold {
    height: 48rpx;
    line-height: 48rpx;
    font-size: 32rpx;
    color: #1C253A;
    font-weight: bold;
  }

  .date {
    margin-left: 20rpx;
    height: 48rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #888E98;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }


  .bottom-contianer {
    position: fixed;
    bottom: 40rpx;
    width: 100%;
    z-index: 99;
    display: flex;
    flex-direction: row;
  }

  .button {
    width: 80%;
    background-color: #54B9CC;
    color: white;
    font-size: 32rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }



  .text_container {
    background: #FFFFFF;
    height: 216rpx;
    width: 100%;
    padding: 16rpx;
    margin-top: 16rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 1rpx solid #f5f6fB;
    font-size: 30rpx;
    color: #888E98
  }

  .text_area {
    height: 100rpx
  }
</style>
